<template>
  <div class="collection">
    <head-Menu></head-Menu>
    <div class="CContainer">
     <el-collapse accordion>
        <el-collapse-item v-for="(CFData, i) in collectionFileList">
          <template slot="title">
            <span class="CFList">{{CFData.label}}</span>
          </template>
          <el-table :data="CFData.children" style="width: calc(100% - 5px);">
            <el-table-column label="收藏夹名称" prop="label" show-overflow-tooltip></el-table-column>
            <el-table-column width=160 >
              <template slot-scope="scope">
                <el-button @click="toCollectFile(scope.row, CFData.label)" type="primary" icon='el-icon-edit' size="medium" round>进入收藏夹</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div> 
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getCollectionStructure } from "../../api/user";
export default {
  data() {
    return {
      collectionFileList: {},
    }
  },
  components: {
    headMenu
  },
  props: {
    params: {
        type: Object,
        default:{}
    }
  },
  created() {
    this.getCollectionStructure()
  },
  methods: {
    async getCollectionStructure() {
      await getCollectionStructure(this.params)
        .then((res) => {
          this.collectionFileList = res.data
        })
    },
    toCollectFile(row, label) {
      sessionStorage.setItem('viewCollectFileInf', JSON.stringify({
          username: this.params.username,
          account: this.params.account,
          collectionStructureName: label + ' ' + row.label
        }))
      this.$router.push({
          path:'/student/viewCollectionTopic',
        })
    },
  },
}
</script>

<style lang='stylus'>
.collection
  flex 1 1 100%
  display block
  .CContainer
    margin 0 20px
    text-align center
    max-height 600px
    overflow-y auto
    .CFList
      margin-left 10px
      font-weight 600
      font-size 16px
      font-family '黑体'
    .el-collapse-item__header
      box-shadow 2px 2px 8px #ccc
</style>